<template>
  <div class="personal-info">
      <div class="avatar">
          <el-avatar :size="125" :src="circleUrl" id="avatarView"></el-avatar>
          <input type="file" id="avatarInput" @change="handleFileChange" accept="image/*" />
          <span style="font-size: 16px;">JPG, GIF or PNG. Max size of 800K</span>
          <button @click="uploadAvatar">立刻上传</button>
      </div>

      <div class="form">
          <div class="form-group">
              <label for="username">用户名</label>
              <span>{{username}}</span>
          </div>

          <div class="form-group">
              <label for="birthdate">出生日期</label>
              <input type="date" id="birthdate" v-model="birthdate" />
          </div>

          <div class="form-group">
              <label for="occupation">职业</label>
              <input type="text" id="occupation" v-model="occupation" />
          </div>

          <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" id="email" v-model="email" />
          </div>

          <div class="form-group">
              <label for="phone">手机号码</label>
              <input type="tel" id="phone" v-model="phone" />
          </div>
      </div>

      <el-row>
        <button @click="saveChanges">一键保存</button>
        <button style="background-color: #19D3FF;" @click="handleUnregister">注销账户</button>
      </el-row>
      <!-- 个人信息保存成功提示信息的条件渲染 -->
      <div v-if="showSuccessMessage" class="success-message">保存成功！</div>
  </div>
</template>

<script>
import axios from 'axios'
import {changeAvatar} from '@/api/user.js'
import {modifyUserInfo} from '@/api/user.js'
import {getUserInfo} from '@/api/user.js'

export default {
  data() {
      return {
          avatarUrl: '', // The URL of the user's avatar
          username: 'Nymphea', // The user's username
          birthdate: '', // The user's birthdate
          occupation: '学生', // The user's occupation
          email: 'grapes@123.com', // The user's email
          phone: '12345678910', // The user's phone number
          showSuccessMessage: false, // Whether to show the success message
      };
  },
  mounted() {
    getUserInfo().then((res) => {
      if (res.code == 200) {
        this.username = res.data.username;
        this.birthdate = res.data.birthday;
        this.occupation = res.data.job;
        this.phone = res.data.phone;
        this.email = res.data.email;
      } else {
        this.$message.error('获取用户信息失败')
      }
    })
  },
  methods: {
      handleFileChange() {
          // 获取文件上传控件
          const fileInput = document.getElementById('avatarInput');

          // 监听文件变化事件
          fileInput.addEventListener('change', function(event) {
            // 获取用户所选的文件对象
            const file = event.target.files[0];

            this.avatarUrl = URL.createObjectURL(file).replace(/^blob:/, '');
            console.log(this.avatarUrl)
            // Handle the selected file (e.g., preview the image)
            var reader = new FileReader();
            reader.onload = function(e) {
              document.getElementById('avatarView').src = e.target.result;
            };
            reader.readAsDataURL(file);
          });
        },
      uploadAvatar() {
          // Implement logic to upload the avatar file to the server
          

          changeAvatar(this.avatarUrl).then((res) => {
            if(res.code == 200) {
              this.$message.success('修改头像成功')
            } else {
              this.$message.error('修改头像失败')
            }
          })
      },
      saveChanges() {
          // 实现保存用户个人信息的逻辑
          this.username = document.getElementById('username').value
          this.birthdate = document.getElementById('birthdate').value
          this.occupation = document.getElementById('occupation').value
          this.email = document.getElementById('email').value
          this.phone = document.getElementById('phone').value

          modifyUserInfo(this.username, this.avatarUrl, this.birthdate, this.occupation, this.phone, this.email).then((res) =>{
            if (res.code == 200) { //如果保存成功
              // 当保存成功后，设置 showSuccessMessage 为 true
              this.showSuccessMessage = true;

              // 延迟一定时间后隐藏提示消息
              setTimeout(() => {
                  this.showSuccessMessage = false;
              }, 1000); // 设置延迟时间，单位为毫秒 (这里是 1000 毫秒，即 1 秒)
            } else { //如果保存失败
              this.$message.error('用户信息更新失败')
            }
          })


      },
      handleUnregister() {
        this.$confirm('确定注销账户吗', '提示').then(() => {
          //本地调试
          const url = 'http://localhost:28080/api/user/unregister'
          //远程调试
          //const url = 'http://43.143.82.72:28080/api/user/unregister'
          axios.get(url, {}).then((res) => {
            if(res.code == 200) {
              //注销成功后重定向到登录页面
              this.$message.success('注销成功');
              this.$router.push('/login');
            } else {
              this.$message.error('注销失败');
            }
          })
        })
      }
  },
};
</script>

<style scoped>
.personal-info {
  background-color: #FFEACE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar el-avatar {
  margin-bottom: 10px;
}

.avatar input[type="file"] {
  margin-bottom: 10px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 10px;
}

label {
  font-size: 100%;
  font-weight: bold;
  display: block;
  /* Add this line to place labels on a separate line */
  text-align: left;
}

input {
  font-size: 80%;
  width: 1000px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: left;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  background-color: #FF9000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #007bff;
}

.success-message {
  position: fixed;
  top: 60%;
  left: 45%;
  transform: translateX(-50%);
  background-color: #FFF7EF;
  color: #155724;
  padding: 20px 20px;
  border: 1px solid #C3E6CB;
  border-radius: 4px;
  z-index: 9999;
}
</style>  